<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子名片</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 30px;
            width: 100%;
            max-width: 400px;
        }

        .profile-image {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin: 0 auto 20px;
            display: block;
            object-fit: cover;
            border: 3px solid #3498db;
        }

        .image-upload {
            text-align: center;
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #333;
            font-weight: bold;
        }

        input[type="text"],
        input[type="tel"],
        input[type="email"],
        textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }

        .save-btn {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            width: 48%;
            font-size: 16px;
            margin-top: 20px;
        }

        .export-btn {
            background-color: #2ecc71;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            width: 48%;
            font-size: 16px;
            margin-top: 20px;
            margin-left: 4%;
        }

        .button-group {
            display: flex;
            justify-content: space-between;
        }

        .save-btn:hover {
            background-color: #2980b9;
        }

        .export-btn:hover {
            background-color: #27ae60;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="image-upload">
            <img src="placeholder.png" alt="个人头像" class="profile-image" id="preview">
            <input type="file" id="imageInput" accept="image/*" style="display: none;">
            <button onclick="document.getElementById('imageInput').click()" style="margin-top: 10px;">上传头像</button>
        </div>
        
        <form id="businessCard">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" required>
            </div>

            <div class="form-group">
                <label for="title">职位</label>
                <input type="text" id="title">
            </div>

            <div class="form-group">
                <label for="company">公司</label>
                <input type="text" id="company">
            </div>

            <div class="form-group">
                <label for="phone">电话</label>
                <input type="tel" id="phone" required>
            </div>

            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" id="email">
            </div>

            <div class="form-group">
                <label for="bilibili">B站主页</label>
                <input type="text" id="bilibili" placeholder="例如：https://space.bilibili.com/xxxxxx">
            </div>

            <div class="form-group">
                <label for="address">地址</label>
                <textarea id="address" rows="2"></textarea>
            </div>

            <div class="button-group">
                <button type="submit" class="save-btn">保存名片</button>
                <button type="button" class="export-btn" onclick="exportCard()">导出名片</button>
            </div>
        </form>
    </div>

    <script>
        // 图片预览功能
        document.getElementById('imageInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('preview').src = e.target.result;
                }
                reader.readAsDataURL(file);
            }
        });

        // 表单提交处理
        document.getElementById('businessCard').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = {
                name: document.getElementById('name').value,
                title: document.getElementById('title').value,
                company: document.getElementById('company').value,
                phone: document.getElementById('phone').value,
                email: document.getElementById('email').value,
                bilibili: document.getElementById('bilibili').value,
                address: document.getElementById('address').value
            };
            
            // 这里可以添加保存到本地存储或发送到服务器的代码
            localStorage.setItem('businessCard', JSON.stringify(formData));
            alert('名片信息已保存！');
        });

        // 页面加载时恢复保存的数据
        window.addEventListener('load', function() {
            const savedData = localStorage.getItem('businessCard');
            if (savedData) {
                const data = JSON.parse(savedData);
                document.getElementById('name').value = data.name || '';
                document.getElementById('title').value = data.title || '';
                document.getElementById('company').value = data.company || '';
                document.getElementById('phone').value = data.phone || '';
                document.getElementById('email').value = data.email || '';
                document.getElementById('bilibili').value = data.bilibili || '';
                document.getElementById('address').value = data.address || '';
            }
        });

        // 导出名片功能
        function exportCard() {
            // 获取当前图片数据
            const currentImage = document.getElementById('preview').src;
            
            // 获取所有表单数据
            const formData = {
                name: document.getElementById('name').value,
                title: document.getElementById('title').value,
                company: document.getElementById('company').value,
                phone: document.getElementById('phone').value,
                email: document.getElementById('email').value,
                bilibili: document.getElementById('bilibili').value,
                address: document.getElementById('address').value
            };

            // 创建新的HTML内容
            const htmlContent = `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子名片 - ${formData.name}</title>
    <style>
        ${document.querySelector('style').innerHTML}
        .contact-link {
            color: #3498db;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .contact-link:hover {
            text-decoration: underline;
        }
        .bilibili-icon {
            width: 16px;
            height: 16px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="image-upload">
            <img src="${currentImage}" alt="个人头像" class="profile-image" id="preview">
        </div>
        
        <form id="businessCard">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" value="${formData.name}" readonly>
            </div>

            <div class="form-group">
                <label for="title">职位</label>
                <input type="text" id="title" value="${formData.title}" readonly>
            </div>

            <div class="form-group">
                <label for="company">公司</label>
                <input type="text" id="company" value="${formData.company}" readonly>
            </div>

            <div class="form-group">
                <label for="phone">电话</label>
                <div style="padding: 8px;">
                    <a href="tel:${formData.phone}" class="contact-link">${formData.phone}</a>
                </div>
            </div>

            <div class="form-group">
                <label for="email">邮箱</label>
                <div style="padding: 8px;">
                    <a href="mailto:${formData.email}" class="contact-link">${formData.email}</a>
                </div>
            </div>

            <div class="form-group">
                <label for="bilibili">B站主页</label>
                <div style="padding: 8px;">
                    <a href="${formData.bilibili}" target="_blank" class="contact-link">
                        <svg class="bilibili-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                            <path fill="#3498db" d="M777.514667 131.669333a53.333333 53.333333 0 0 1 0 75.434667L728.746667 255.829333h49.92A160 160 0 0 1 938.666667 415.872v320a160 160 0 0 1-160 160H245.333333A160 160 0 0 1 85.333333 735.872v-320a160 160 0 0 1 160-160h49.749334L246.4 207.146667a53.333333 53.333333 0 1 1 75.392-75.434667l113.152 113.152c3.370667 3.370667 6.186667 7.04 8.448 10.965333h137.088c2.261333-3.925333 5.077333-7.594667 8.448-10.965333l113.152-113.152a53.333333 53.333333 0 0 1 75.434667 0z m1.152 231.253334H245.333333a53.333333 53.333333 0 0 0-53.333333 53.333333v320a53.333333 53.333333 0 0 0 53.333333 53.333333h533.333334a53.333333 53.333333 0 0 0 53.333333-53.333333v-320a53.333333 53.333333 0 0 0-53.333333-53.333333z m-426.666667 106.666666c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z m320 0c29.44 0 53.333333 23.893333 53.333333 53.333334v53.333333a53.333333 53.333333 0 1 1-106.666666 0v-53.333333c0-29.44 23.893333-53.333333 53.333333-53.333334z"/>
                        </svg>
                        ${formData.bilibili.replace('https://space.bilibili.com/', '')}
                    </a>
                </div>
            </div>

            <div class="form-group">
                <label for="address">地址</label>
                <textarea id="address" rows="2" readonly>${formData.address}</textarea>
            </div>
        </form>
    </div>
</body>
</html>`;

            // 创建Blob对象
            const blob = new Blob([htmlContent], { type: 'text/html' });
            
            // 创建下载链接
            const downloadLink = document.createElement('a');
            downloadLink.href = URL.createObjectURL(blob);
            downloadLink.download = `${formData.name}的电子名片.html`;
            
            // 触发下载
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
        }
    </script>
</body>
</html> 